<template>
  <view class="course_list_container">
    <navbar title="会员技巧专练">
      <template v-slot:bottom>
        <TiyanDialog :nav="true"></TiyanDialog>
      </template>
    </navbar>
    <view :class="['course_item', 'content_'+item.id]" v-for="(item, n) in contents" :key="item.id"
          @click="toDetail(item)">
      <view class="cover_wrapper" :style="{'background-image': styleBgImageUrl(item.coverUrl)}">
        <view class="index">{{ n + 1 }}</view>
      </view>
      <view class="body">
        <view class="header">
          <view class="vip_icon" v-if="item.free===0">试 看</view>
          <view class="vip_icon" v-else-if="item.free===1">免 费</view>
          <view class="vip_icon" v-else>会员专享</view>
          <view class="title">{{ item.title }}</view>
        </view>
        <view class="f1"></view>
        <view class="row">
          <view class="icon time"></view>
          <view class="text">{{ item.time}}</view>
        </view>
        <view class="row">
          <view class="icon view"></view>
          <view class="text">{{ readCountFormat(item.readCount) }}人观看</view>
        </view>
        <view class="play_btn"></view>
      </view>
    </view>
    <view class="btn_container" v-if="!kemuVIP" @click="toBuy">
      <view class="pay_btn">
        付费开通全部{{ contents.length }}门课程
      </view>
    </view>
    <ADIntercept ref="ADIntercept"></ADIntercept>
  </view>
</template>
<script>
import {courseApi} from "@/api";
import Navbar from "@/components/navbar.vue";
import {styleBgImageUrl} from "@/libs/utils";
import {mapActions, mapGetters} from 'vuex'
import Pay from "@/components/Pay.vue";
import LoginView from "@/components/LoginView/LoginView.vue";
import ADIntercept from "@/components/ADIntercept.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {TiyanDialog, ADIntercept, Pay, Navbar, LoginView},
  data() {
    return {
      contents: [],
      select: 0,
      course: null
    }
  },
  computed: {
    ...mapGetters(['systemInfo', 'vipProducts', 'isKemu1VIP', 'isKemu2VIP', 'isKemu3VIP', 'isKemu4VIP']),
    kemuVIP() {
      if (this.course) {
        if (this.course.kemu === 1) {
          return this.isKemu1VIP
        }
        if (this.course.kemu === 2) {
          return this.isKemu2VIP
        }
        if (this.course.kemu === 3) {
          return this.isKemu3VIP
        }
        if (this.course.kemu === 4) {
          return this.isKemu4VIP
        }
      }
    }
  },
  options: {
    styleIsolation: "shared"
  },
  async onLoad({courseId, tagId = null, questionId = null}) {
    this.tagId = tagId
    this.questionId = questionId

    const res = await courseApi.info(courseId)
    this.contents = res.data.data.contents
    this.course = res.data.data

    if (tagId) {
      const found = this.contents.find(content => {
        return !!content.tags.find(tag => {
          return tag.tagId === tagId
        })
      })

      console.log(found)
      if (found) {
        this.$nextTick(() => {
          uni.pageScrollTo({
            selector: '.content_' + found.id,
            duration: 300
          })
        })
      }
    }
  },
  methods: {
    ...mapActions(['refreshUser']),
    styleBgImageUrl,
    readCountFormat(count) {
      return Math.round(count / 1000) / 10 + 'w'
    },
    async toDetail(item) {
      if (item.free === -1 && !this.kemuVIP) {
        uni.showToast({
          title: '请开通会员！', icon: 'none', duration: 2000
        })
        return
      }
      try {
        await this.$refs.ADIntercept.tryOpen()
        uni.navigateTo({
          url: '/pages/video_detail/video_detail?contentId=' + item.id
        })
      } catch (e) {
        console.log(e)
      }
    },
    async toBuy() {
      uni.navigateTo({
        url: '/pages/vip/vip'
      })
    },
  }
}
</script>
<style lang="scss">
::v-deep .top-bar.white {
  border-bottom: none;
}
page {
  background-color: #f4f3fb;
}
::v-deep .top-bar.white {
  background-color: transparent;
}
.course_list_container {

  .btn_container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: #fff;

    .pay_btn {
      color: #fff;
      font-size: 16px;
      height: 108rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 32rpx 20rpx;
      background-image: linear-gradient(112deg, #E97A59 0%, #F05844 44%, #E8472C 100%);
      border-radius: 100rpx;
    }
  }

  .vip_bottom {
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    //box-shadow: 0 2px 10px #0000001a;
    box-shadow: 0 2px 10px #00000040;

    .protocol-container {
      margin-bottom: 30rpx;
      text-align: center;

      .title1 {
        font-size: 22upx;
        color: #B1B1B1;
      }

      .title2 {
        font-size: 22upx;
        color: #5A5A5A;
      }
    }

    .ios-button-container {
      width: 750upx;
      height: 344upx;
      display: flex;
      justify-content: center;
      bottom: 30rpx;
      z-index: 10;

      .tips {
        font-weight: bold;
        font-size: 32upx;
        color: #683A23;
        position: absolute;
        margin-top: 90rpx;
      }

      .img-vip-button {
        width: 750upx;
        margin-top: 60rpx;
      }
    }

    .productTips {
      text-align: center;
      margin-top: 30rpx;
      color: #F56F56;
    }

    .buy {
      background-image: linear-gradient(106deg, #E97A59 7%, #F15642 48%, #E64428 98%);
      border-radius: 100rpx;
      height: 108rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      margin: 32rpx;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }

    .btns_container {
      display: flex;

      .btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #88685F;
        height: 100rpx;
        border-radius: 12rpx;
        margin: 23rpx;
        font-size: 16px;
        color: #702914;
        font-weight: bold;
        margin-bottom: 0;
        box-sizing: border-box;
        position: relative;
        @keyframes tiao {
          0% {
            transform: translateY(-5px);
          }
          50% {
            transform: translateY(0);
          }
          100% {
            transform: translateY(-5px);
          }
        }

        .flag {
          position: absolute;
          font-size: 12px;
          color: #FFFCF9;
          z-index: 1;
          top: -25rpx;
          padding: 5rpx 40rpx;
          right: 10rpx;
          background-image: linear-gradient(102deg, #FF7610 0%, #FA4538 54%, #FE5E60 93%);
          border-radius: 12px 12px 12px 0;
          animation: tiao 1000ms infinite;
        }

        .select {
          position: absolute;
          left: 0;
          top: 0;
          background-image: linear-gradient(116deg, #FBDFCD 0%, #FBC59F 95%);
          border-radius: 10rpx 0 12rpx 0;
          font-size: 10px;
          color: #201C1B;
          padding: 5rpx 15rpx;
        }

        &.active {
          background: #1A1E27;
          border: none;
          color: #fff;
        }

        &:first-child {
          margin-left: 32rpx;
        }

        &:last-child {
          margin-right: 32rpx;
          margin-left: 0;
        }
      }
    }
  }

  .course_item {
    display: flex;
    padding: 30rpx 24rpx;
    position: relative;
    background-color: #fff;
    margin-left: 32rpx;
    margin-right: 32rpx;
    margin-bottom: 20rpx;
    border-radius: 24rpx;

    .index {
      position: absolute;
      width: 55rpx;
      text-align: center;
      left: 0;
      top: 0;
      color: rgb(246, 203, 177);
      background-image: linear-gradient(112deg, #141819 0%, #1B2229 44%, #2B313E 100%);
      border-bottom-right-radius: 20rpx;
      height: 40rpx;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 5rpx;
    }

    &:nth-child(2) {
      padding-top: 30rpx;
    }

    .cover_wrapper {
      border-radius: 20rpx;
      position: relative;
      overflow: hidden;
      width: 232rpx;
      height: 176rpx;
      margin-right: 20rpx;
      background-size: cover;
      background-position-y: center;
    }

    .body {
      flex: 1;
      //background-color: #e6f8e8;
      display: flex;
      flex-direction: column;
      position: relative;
      .play_btn {
        position: absolute;
        right: 0;
        width: 64rpx;
        height: 64rpx;
        background-size: cover;
        background-image: url("@/static/kemu1video/play.png");
        bottom: 0;
      }

      .header {
        width: 410rpx;
        display: flex;
        margin-top: 10rpx;

        .vip_icon {
          background: linear-gradient( 90deg, #FAD5BD 0%, #EFBE9E 100%);
          border-radius: 12rpx;
          color: rgba(98, 65, 52, 1);
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2rpx 10rpx;
          font-weight: bold;
          margin-right: 8rpx;
        }

        .title {
          font-size: 16px;
          font-weight: bold;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }
      }

      .row {
        display: flex;
        color: rgba(123, 128, 142, 1);
        align-items: center;
        margin-bottom: 8rpx;
        .icon {
          width: 32rpx;
          height: 32rpx;
          background-size: cover;
          margin-right: 8rpx;
          &.time {
            background-image: url("@/static/kemu1video/time_icon.png");
          }
          &.view {
            background-image: url("@/static/kemu1video/view_icon.png");
          }
        }
      }
    }

    .label {
      margin-top: 30rpx;
      font-size: 15px;
      color: #000;

      &.active {
        color: #0D94FF;
      }
    }

    .vip {
      position: absolute;
      background-image: linear-gradient(112deg, #141819 0%, #1B2229 44%, #2B313E 100%);
      color: #FFE7BB;
      right: 10rpx;
      top: 10rpx;
      font-size: 12px;
      padding: 8rpx 20rpx;
      border-radius: 10rpx;
    }
  }
}
</style>
